<template>
    <div class="knowledge">
        <ol>
          <li><b>基本介绍</b></li>
          <p>.scss 符合正常的写法；.sass 使用 “缩进” 代替 “花括号” 用 “换行” 代替 “分号” ；两种格式可以相互引用，也可以通过 sass-convert 转换</p>
          <li><b>CSS 功能拓展</b></li>
          <p>支持嵌套和父选择器 &：.button{&-ok{...}} => .button-ok{}</p>
          <p>*属性嵌套：.css-extend{font: {size: 24px;weight: bold;}}</p>
          <p>*占位符选择器 %：该选择器样式不会被编译到CSS文件中 与@extend配合使用 类似与less中的extend和有括号的mixins：%extend{background: rgb(209, 255, 122);} ;@extend %extend;</p>
          <li><b>注释 /* */ 与 //</b></li>
          <p>多行注释内容会完整输出到编译结果当中，而单行注释不会</p>
          <p>压缩模式下，在多行注释第一个字符加上！会保留这条注释输出到 CSS 文件</p>
          <p>插值语句可写进多行注释中输出变量值：$version: "1.2.3";/* This CSS is generated by My Snazzy Framework version #{$version}. */</p>
          <li><b>变量和数据类型</b></li>
          <p>变量 $：支持块级作用域；将局部变量转换为全局变量可以添加 !global 声明：.global{$color: pink !global;}</p>
          <p>数据类型：</p>
          <ul>
              <li>数字，1, 2, 10px</li>
              <li>字符串，有引号字符串与无引号字符串，"foo", baz；使用 #{}时，有引号字符串将被编译为无引号字符串</li>
              <li>颜色，blue, #04a3f9, rgba(255,0,0,0.5)</li>
              <li>布尔型，true, false</li>
              <li>空值，null</li>
              <li>数组，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif；从1开始！！
                  <ul>
                      可以在末尾，即分号前加逗号以表示连接方式
                      <li><b>nth 函数</b>可以直接访问数组中的某一项；nth($colorlist, 1)</li>
                      <li><b>join 函数</b>可以将多个数组连接在一起；join($shadow1, $shadow2, comma/space非必填，指定前两个参数内部的连接符号)</li>
                      <li><b>append 函数</b>可以在数组中添加新值；append($shadow1, $shadow2, comma/space非必填，指定前两个参数内部的连接符号)</li>
                      <li><b>@each 指令</b>能够遍历数组中的每一项。@each $color in $colorlist{}</li>
                  </ul>
                  如果内外两层数组使用相同的分隔方式，需要用圆括号包裹内层
              </li>
              <li>maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)注意是圆括号不是大括号</li>
          </ul>
          <li><b>运算</b> - 所有数据类型均支持相等运算 == 或 !=</li>
          <p>数字运算：支持 +, -, *, /, %, &lt;, >, &lt;=, >=</p>
          <p>颜色值运算：分段计算，分别计算红色，绿色，以及蓝色的值，如果颜色值有透明度则必须是相同的透明度才能运算，因为算术运算不会作用于 alpha 值</p>
          <ul>
              <li>opacify() 为颜色值累加不透明度：opacify($color, 0.5);</li>
              <li>transparentize() 将颜色值的不透明度置为指定值：transparentize($color, 0.5);</li>
              <li>ie_hex_str() 将颜色值转换为IE滤镜要求的值</li>
          </ul>
          <p>*字符串运算：+ 可用于连接字符串，有引号和无引号字符串拼接结果有无引号由第一个字符串决定；运算表达式与其他值连用时，用空格做连接符：margin: 3px + 4px auto; => margin: 7px auto; 在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值；空的值被视作插入了空字符串：text-shadow: 1px+2px #{1+2}px 3px black;</p>
          <p>布尔运算：and or 以及 not</p>
          <p>数组不支持任何运算方式，只能使用 list functions 控制</p>
          <p>圆括号可以用来影响运算的顺序</p>
          <p>color: hsl(0, 100%, 50%); 等价于 color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); 后者顺序可以打乱更为灵活</p>
          <li><b>插值语句#{} 和 &</b></li>
          <p>通过#{}可以在选择器或属性名中使用变量：</p>
          <p>#{}在属性值中使用可以避免 Sass 运行运算表达式，直接编译 CSS：</p>
          <p>& 在没有父级选择器时为 null 可以用在@if...@else之中：@if &{$color: red !global;}@else{$color: green !global;}</p>
          <li><b>!default 指定变量默认值</b> - 不会赋值已经有值（除了值为null）的变量</li>
          <li><b>@import</b> - 在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件</li>
          <ul>
              <li>文件拓展名是 .css</li>
              <li>文件名以 http:// 开头</li>
              <li>文件名是 url()</li>
              <li>@import 包含 media queries</li>
          </ul>
          <p>Sass 允许同时导入多个文件：@import "rounded-corners", "text-shadow";</p>
          <p>@import url() 中可以使用#{ } 插值语句</p>
          <p>在文件名前添加下划线，不会将其编译为 CSS，导入语句中不需要添加下划线</p>
          <p>可以将 @import 嵌套进 CSS 样式或者 @media 中，导入的样式只能出现在嵌套的层中</p>
          <li><b>@media</b> - 允许其在 CSS 规则中嵌套</li>
          <p>@media 将被编译到文件的最外层，包含嵌套的父选择器</p>
          <p>@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and</p>
          <p>可以使用 SassScrip代替条件的名称或者值</p>
          <li><b>@extend</b> - 将重复使用的样式延伸给需要包含这个样式的特殊样式,可以减少在标签上的class</li>
          <p>@extend .error;会拿到与.error有关的所有样式，而不仅仅是.error</p>
          <p>Sass 允许延伸任何定义给单个元素的选择器：@extend a:hover;</p>
          <p>多重延伸：同一个选择器可以延伸多个选择器：.a{@extend .error; @extend.attention}; 等价于 @extend .error, .attention;</p>
          <p>继续延伸：当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个</p>
          <p>不可以将选择器列延伸给其他元素，却可以将其他元素延伸给选择器列：#fake-links .link中间用空格隔开的叫做选择器列</p>
          <p>占位符选择器 % 该样式不会被编译到css中 只是供引用：%placehoder{border-color: blue;} ...@extend %placehoder;</p>
          <p>!optional：能够让报错的@extend用法继续运行下去</p>
          <p>在指令中使用 @extend 时（比如在 @media 中），不能将外层的样式延伸到内部，只能延伸给相同指令层中的选择器</p>
          <li><b>@at-root</b> - 该指令可以让选择器脱离父级 直接放在最外层，这个指令也可以单独作为一个选择器</li>
          <p>@at-root .at-root {}; 或者 @at-root {.at-root{}} </p>
          <li><b>控制指令</b></li>
          <ul>
              <li>if()函数 类似js三元表达式 接受三个参数：条件、true结果、false结果；color: if($haserror, red, green);</li>
              <li>@if...@else if...@else</li>
              <li>@for 在限制的范围内重复输出格式：@for $i from 1 to/through 4 区别：to包含1不包含4</li>
              <li>@each：@each $color in $colorlist 其中$colorlist是一个list数据类型</li>
              <ol>多变量用法：
                  <li>@each $animal, $color in (puma, black),(sea-slug, blue),(egret, white){}：$animal => puma、sea-slug、egret；$color => black、blue、white</li>
                  <li>@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em){}：$header => h1、h2、h3；$size => 2em、1.5em、1.2em</li>
              </ol>
              <li>@while 重复输出格式直到表达式返回结果为 false：@while $index > 0{$index: $index - 1}</li>
          </ul>
          <li><b>Mixin 混合指令</b> - 定义可重复使用的样式，避免了使用无语意的 class</li>
          <p>@mixin 定义混合；@include 引用混合：@mixin mixins{color: rgb(25, 98, 255);} ...@include mixins;</p>
          <p>注意：混合样式中应该只定义后代选择器，这样可以安全的导入到文件的任何位置。</p>
          <p>带参数（加上括号）并设置参数默认值：@mixin mixinsparams($color, $boxcolor){background: $color;text-shadow: 3px 3px 1px $boxcolor;} ...@include mixinsparams(rgb(215, 53, 255), white);</p>
          <p>@include mixinsparams(rgb(215, 53, 255), white); 等价于 @include mixinsparams($color: rgb(215, 53, 255), $boxcolor: white);</p>
          <p>参数变量(...)语法：</p>
          <ol>
              <li>在@mixin中使用：@mixin mixinsarg($shadows...) {box-shadow: $shadows;} ...@include mixinsarg(0px 4px 5px #666, 2px 6px 10px #999);</li>
              <li>在@include中使用：@mixin mixinsarg2($weight, $size) {} $value: bold 22px; @include mixinsarg2($value...);</li>
          </ol>
          <p>在@include中添加内容，在@mixin中用@content;接收：@mixin mixinscontent {@content;} @include mixinscontent{font-style: italic;}</p>
          <p>@mixin 可以用 = 表示，而 @include 可以用 + 表示</p>
          <li><b>函数指令</b></li>
          <p>@function自定义函数，能在任何<b>属性值</b>或 Sass script 中使用；需要调用 @return 输出结果：@function myfunc($state){@return if($state, #dd5b33, #fdef9c);} ...background: myfunc(true); color: myfunc(false);</p>
          <li><b>输出格式</b> - :nested 嵌套（默认）、:expanded 不嵌套完全换行、:compact 不嵌套每一条规则内部不换行、:compressed 删除所以无意义的换行和空白</li>
        </ol>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="scss" scoped>
.knowledge{
    text-align: left;
    overflow: scroll;
    height: calc(100% - 70px);
}
</style>